<template>
  <div id="Tou">
    <div id="app1">
   <form >
     <ul>
      <h2 style="margin: 30px 0 40px 0;">登录页面</h2>
      <li>
        <el-icon><User /></el-icon><el-input  v-model="name" v-show="1"  style="width: 240px" placeholder="用户名"  />
      </li>
      <li><el-icon><Lock /></el-icon><el-input v-model="code" style="width: 240px" type="password" placeholder="密码" show-password /></li>
      <li><span style="margin: 0 70px ;font-size: 13px;"><input type="checkbox">记住我</span> <span style="margin: 0 60px;"><el-link href="https://element-plus.org"   target="_blank">找回密码</el-link></span></li>
      <li><el-button style="width: 220px;" type="primary" @click="putin">登录</el-button></li>
      <li><el-link  href="#" target="_blank">手机登录</el-link>&nbsp;&nbsp;
        <el-link href="https://element-plus.org" target="_blank">二微码登录</el-link>&nbsp;&nbsp;
        <el-link @click="zc" href="#" target="_blank">注册</el-link></li>
        <p> </p>
        <li></li>
    </ul>
   </form>
  </div>
  </div>
</template>
<script>
import { ref} from "vue";
import axios from "axios"
import {useRouter}from "vue-router"
export default {
  name: "HomePage",
  
  setup() {
    const router=useRouter()
    const name = ref("");
    let code = ref("");
    let radio = ref();
    async function putin() {
      // console.log(router);
      
      await axios.post("http://localhost:8080/admin/login",{
        userName:name.value,
        password:code.value,
      }).then((a)=>{
        sessionStorage.setItem("TOKEN",a.data.data)
        routers()
      })
      
    }
    function zc(){
      router.push({
        name:"zc",
      })
    }
    function routers(){
      router.push({
        name:"shouye",
      })
    }
    function pd() {

    }
    return {
      name,
      code,
      radio,
      putin,
      routers,
      router,
      pd,
      zc,
    };
  },
};
</script>

<style scoped>
*{
  margin:0;
  padding: 0;
}
#Tou{
display: flex;
  width: 100%;
  height: 100%;
  padding-top: 100px;
   /* background-color: cornflowerblue;  */
   background-image: url(https://img.shetu66.com/2023/07/14/1689302109429582.png);
}
#app1 {
  margin-bottom: 20;
  height: 500px;
  width: 450px;
  left:70%;
  border-radius: 20px;
  margin: 0 0 0 700px;
  background-color:#f8f6ea ;
  background:rgba(255,255,255);
}
li {
  list-style-type: none;
  margin: 40px auto;
}
</style>